<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
    <script src="./assets/js/OrbitControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script>
    /**
     * 创建场景对象
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
        // 球体 参数 半径60 经纬度细分数40，40
        // var box = new THREE.SphereGeometry(60, 40, 40);//创建一个立方体几何对象
        // 长方体 参数 长，宽，高
    var box = new THREE.BoxGeometry(100, 100, 100);//创建一个立方体几何对象
    // 圆柱 参数： 圆柱面顶部、底部直径50，50 高度100  圆周分数段
    // var box = new THREE.CylinderGeometry(50, 50, 100,25);//创建一个立方体几何对象
    // 正八面体
    // var box = new THREE.OctahedronGeometry(50);//创建一个立方体几何对象
    // 正十二面体
    // var box = new THREE.DodecahedronGeometry(50);//创建一个立方体几何对象
    // 正十八面体
    // var box = new THREE.IcosahedronGeometry(50);//创建一个立方体几何对象
    // var material = new THREE.MeshLambertMaterial({color: 0x0000ff});//材质对象
    // 基础网络材质对象 不受光源影响 没有菱角感
    var material = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        wireframe: true,  //线条模式渲染

    });//材质对象
    var mesh = new THREE.Mesh(box, material);//网格模型对象

    // mesh.translateX(120); //沿着X轴平移
    // mesh.translateY(120); //沿着Y轴平移
    // 方法二
    // mesh.position.set(100,0,0);
    scene.add(mesh);//网格模型添加到场景中

    var box1 = new THREE.CylinderGeometry(50, 50, 100, 25);//创建一个立方体几何对象
    // var material1 = new THREE.MeshLambertMaterial({color: 0xeeeeee});//
    var material1 = new THREE.MeshPhongMaterial({
        color: 0xeeeeee,
        specular: 0x444444,
        shininess: 30,
        transparent: true,// 开启透明度
        opacity: 0.5, //设置透明度具体值
    });//材质对象

    var mesh1 = new THREE.Mesh(box1, material1);//网格模型对象
    mesh1.translateY(120); //沿着Y轴平移
    scene.add(mesh1);//网格模型添加到场景中

    var box2 = new THREE.SphereGeometry(60, 40, 40);//创建一个立方体几何对象
    var material2 = new THREE.MeshLambertMaterial({color: 0x333eee});//材质对象
    var mesh2 = new THREE.Mesh(box2, material2);//网格模型对象
    mesh2.translateX(120); //沿着Y轴平移

    scene.add(mesh2);//网格模型添加到场景中
    // 辅助坐标系列
    var axisHelper = new THREE.AxisHelper(250);
    scene.add(axisHelper);
    /**
     *  光源设置
     */
        // 点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300);//点光源位置
    scene.add(point); //点光源添加到场景中
    // 环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    /**
     * 相机设置
     */
    var width = window.innerWidth;//窗口宽度
    var height = window.innerHeight;//窗口高度
    var k = width / height; //窗口宽高比
    var s = 200;//三维场景显示范围控制系数，系数越大，显示的范围越大
    // 创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);//设置相机位置
    camera.lookAt(scene.position);//设置相机方向（指向的场景对象）
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0xb9d3ff, 1);//设置背景颜色
    document.body.appendChild(renderer.domElement);//body元素中插入canvas对象

    function render() {
        renderer.render(scene, camera);//执行渲染操作   指定场景、相机作为参数
    }

    render();
    // 创建控件对象 相机对象Camera作为参数 控件可以监听鼠标的变化，改变相机对象的属性
    var controls = new THREE.OrbitControls(camera);
    // 监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
    controls.addEventListener('change', render);
</script>
</body>
</html>
